<template>
  <div class="container">
    <el-row class="tac">
      <el-col :span="12">
        <el-menu
            :default-active=defaultPage
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
        >
          <el-menu-item index="2" @click="handleClick1" class="menu-item">
            <el-icon><UserFilled /></el-icon>
            <span class="item">个人信息</span>
          </el-menu-item>
          <el-menu-item index="1" @click="handleClick2" class="menu-item">
            <el-icon><LocationInformation /></el-icon>
            <span class="item">收货地址</span>
          </el-menu-item>
          <el-menu-item index="3" @click="handleClick3" class="menu-item">
            <el-icon><Star /></el-icon>
            <span class="item">我的收藏</span>
          </el-menu-item>
          <el-sub-menu class="menu-item">
            <template #title>
              <el-icon><List /></el-icon>
              <span class="item">我的订单</span>
            </template>
              <el-menu-item index="4" @click="handleClick4">
                <el-icon><Check /></el-icon>
                <span>已付款</span>
              </el-menu-item>
              <el-menu-item index="5" @click="handleClick5">
                <el-icon><Timer /></el-icon>
                <span>未付款</span>
              </el-menu-item>
          </el-sub-menu>
          <el-menu-item index="6" @click="handleClick6" class="menu-item">
            <el-icon><Document /></el-icon>
            <span class="item">我的足迹</span>
          </el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      page:0,
      defaultPage:"2"
    }
  },
  methods: {
    handleOpen() {

    },
    handleClose() {

    },
    handleClick1(){
      console.log("handleClick1")
      this.page=1
    },
    handleClick2(){
      this.page=2
    },
    handleClick3(){
      this.page=3
    },
    handleClick4(){
      this.page=4
    },
    handleClick5(){
      this.page=5
    },
    handleClick6(){
      this.page=6
    }
  },
  watch: {
    page(newPage){
      this.$emit("onPageChange",newPage)
    }
  },
  mounted() {
  }
}


</script>

<style scoped>
.container {
  width: 200px;
}
.el-menu-vertical-demo {
  width: 200px;
}
.menu-item {
  margin-left: 20px;
}
.item {
  font-size: 20px;
}
</style>